<template>
  <div>
    <div class="header">
      <div class="header-item">
        摸板名称：
        <el-input
          style="width: 180px"
          size="small"
          clearable
          v-model="search.templateName"
          placeholder="请输入摸板名称"
        />
      </div>
      <div class="header-item">
        <el-button
          @click="searchData"
          size="small"
          type="primary"
        >
          搜索
        </el-button>
      </div>
      <div
        class="header-item"
        style="float: right"
      >
        <el-button
          @click="$router.push('/approval/AddTemplate')"
          size="small"
          type="success"
          icon="el-icon-plus"
        >
          新建摸板
        </el-button>
      </div>
    </div>
    <el-table
      :data="items"
      size="medium"
      @row-dblclick="dbClick"
      :height="parseInt($store.state.pageHeight)-350"
    >
      <el-table-column
        prop="templateName"
        align="center"
        label="摸板名称"
      />
      <el-table-column
        prop="userName"
        align="center"
        label="创建人"
      />
      <el-table-column
        prop="createTime"
        align="center"
        label="创建时间"
      >
        <template slot-scope="scope">
          {{ scope.row.createTime?$_util.formatDate(scope.row.createTime):'----' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="updateTime"
        align="center"
        label="更新时间"
      >
        <template slot-scope="scope">
          {{ scope.row.updateTime?$_util.formatDate(scope.row.updateTime):'----' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="userName"
        align="center"
        label="操作"
        width="300"
      >
        <template slot-scope="scope">
          <el-button
            size="small"
            type="danger"
            @click="remove(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <FooterPage
      :page-size="pre_page"
      :total-page="total_count"
      :current-page="page"
      @pageChange="pageChange"
      @sizeChange="sizeChange"
    />
  </div>
</template>
<script>
  import FooterPage from '@/component/common/FooterPage'

  export default {
    name: 'TemplateList',
    components: {
      FooterPage
    },
    data () {
      return {
        total_count: 0,
        search: {
          templateName: ''
        },
        items: []
      }
    },
    created () {
      this.getItems()
    },
    activated () {
      if (this.$_isInit()) return
      this.getItems()
    },
    methods: {
      async remove (id) {
        await this.$confirm('确定要删除摸板吗?', '删除确认')
        await this.$service.gzl.removeTemplate(id)
        this.$message.success('删除成功')
        this.getItems()
      },
      dbClick (row) {
        this.$router.push(`/approval/EditTemplate/${row.id}`)
      },
      searchData () {
        this.page = 1
        this.getItems()
      },
      async getItems () {
        const params = {
          page: this.page,
          pageSize: this.pre_page,
          ...this.search
        }
        const { data } = await this.$service.gzl.templateList(params)
        this.items = data.data.records
        this.total_count = data.data.total
      },
      pageChange (page) {
        this.page = page
        this.getItems()
      },
      sizeChange (size) {
        this.pre_page = size
        this.getItems()
      }
    }
  }
</script>

<style scoped>
  .header {
    padding: 10px;
    font-size: 14px;
    border-bottom: 1px solid #eee;
  }

  .header-item {
    display: inline-block;
    margin-right: 10px;
  }
</style>
